<template>
  <view>
    <web-load v-if="loading"></web-load>

    <view class="header">
      <text>最新扫描结果</text>
      <text>扫描时间：{{ info.created_at }}</text>
      <view class="foot">
        <view class="item">
          <image src="../../static/image/left_foot.png"></image>
          <text>（您的左脚）</text>
          <text>脚长：{{ info.len_left }}mm </text>
          <text>脚宽：{{ info.width_left }}mm</text>
        </view>
        <view class="item">
          <image src="../../static/image/right_foot.png"></image>
          <text>（您的右脚）</text>
          <text>脚长：{{ info.len_right }}mm </text>
          <text>脚宽：{{ info.width_right }}mm</text>
        </view>
      </view>
    </view>
    <view class="title" v-if="list.length != 0"> 脚型扫描记录 </view>
    <view
      class="record"
      v-if="list.length != 0"
      v-for="item in list"
      :key="item.id"
    >
      <view class="box">
        左脚脚长：{{ item.len_left }}mm <br />
        左脚脚宽：{{ item.width_left }}mm <br />
        <p>{{ item.created_at }}</p>
      </view>
      <view class="box">
        右脚脚长：{{ item.len_right }}mm <br />
        右脚脚宽：{{ item.width_right }}mm
      </view>
    </view>
    <view v-if="list.length != 0" class="more">没有更多了</view>
  </view>
</template>

<script>
import webLoad from "@/components/unit/loading.vue";
export default {
  components: { webLoad },
  data() {
    return {
      info: {},
      list: [],
      loading: true,
    };
  },

  onLoad() {
    this.getFootData();
  },

  methods: {
    getFootData() {
		this.ajax('user/getFootData',{
			
			success:(res) =>{
				if(res.code != 4){
					this.loading = false;
					if(res.code == 0){
						this.toast(res.msg);
						return
					}
					this.list = res.msg.data;
					this.info = res.msg.info;
				}
				
				
			}
		});
     
    },
  },
};
</script>
<style>
page {
  background-color: #f9f9f9;
}
</style>
<style lang="less" scoped>
.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding-bottom: 44rpx;
  text {
    width: 100%;
    text-align: center;
    &:nth-child(1) {
      height: 44rpx;
      font-size: 32rpx;
      margin-top: 38rpx;
    }
    &:nth-child(2) {
      height: 34rpx;
      font-size: 24rpx;
      color: #999999;
      margin-top: 14rpx;
    }
  }
  .foot {
    display: flex;
    justify-content: space-between;

    width: 100%;

    .item {
      display: flex;
      flex-direction: column;
      &:nth-child(1) {
        margin: 0 0rpx 0 92rpx;
      }
      &:nth-child(2) {
        margin: 0 92rpx 0 0rpx;
      }
      image {
        width: 212rpx;
        height: 348rpx;
        margin-top: 36rpx;
      }
      text {
        text-align: center;
        &:nth-child(2) {
          color: #000000;
          height: 40rpx;
          line-height: 40rpx;
          font-size: 28rpx;
          font-weight: bold;
          margin-top: 20rpx;
        }
        &:nth-child(3),
        &:nth-child(4) {
          height: 50rpx;
          font-size: 32rpx;
          line-height: 50rpx;
        }
      }
    }
  }
}
.title {
  background: #fff;
  padding: 20rpx 0;
  font-size: 32rpx;
  text-align: center;
  margin: 20rpx 0;
}

.record {
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 30rpx 26rpx;
  border-bottom: 1px solid #eee;

  .box {
    font-size: 28rpx;
    color: #000;
    line-height: 50rpx;
    p {
      color: #999999;
      font-size: 24rpx;
    }
  }
}
.record:nth-last-child(1) {
  border: none;
}
.more {
  height: 108rpx;
  line-height: 108rpx;
  color: #999999;
  font-size: 24rpx;
  text-align: center;
}
</style>
